import React from 'react';
import Lazyload from "react-lazyload";

import {
    ListWrapper,
    ListItem,
    List
} from './style';
import { getCount } from "../../api/utils";
function RecommendList(props) {
    return (
        <ListWrapper>
            <h1 className="title"> 推荐歌单 </h1>
            <List>
                {
                    props.recommendList.map ((item, index) => {
                        return (
                            <ListItem key={item.id}>
                                <div className="img_wrapper">
                                    <div className="decorate"></div>
                                    {/* 加此参数可以减小请求的图片资源大小 */}
                                    <Lazyload placeholder={<img  src={require("./music.png")} width="100%" height="100%" alt="music"  />} >

                                    </Lazyload>
                                    <img src={item.picUrl + "?param=300x300"} width="100%" height="100%" alt="music"/>
                                    <div className="play_count">
                                        <i className="iconfont play">&#xe885;</i>
                                        <span className="count">{getCount (item.playCount)}</span>
                                    </div>
                                </div>
                                <div className="desc">{item.name}</div>
                            </ListItem>
                        )
                    })
                }
            </List>
        </ListWrapper>
    );
}

export default React.memo(RecommendList);